<template>
  <div class="app-intro-big-item">
    <div class="item" v-if="introBigItem">
      <div class="detail-bg" :style="{ 'backgroundImage': 'url('+ detailbg +')' }"></div>
      <div class="detail-filter"></div>
      <div class="detail-box">
        <div class="poster">
          <img :src="poster" alt>
        </div>
        <div class="content">
          <div class="title">{{ introBigItem.nm }}</div>
          <div class="title-en-name">{{ introBigItem.enm }}</div>
          <div class="score" v-if=" introBigItem.sc != 0 ">
            {{ introBigItem.sc }}
            <span class="sum">({{ introBigItem.snum | snum }}人评)</span>
          </div>
          <div class="score" v-else>
            <span class="sum">暂无评论</span>
          </div>
          <div class="type">{{ introBigItem.cat }}</div>
          <div class="scr">{{ introBigItem.src }}/{{ introBigItem.dur }}分钟</div>
          <div class="pubDesc">{{ introBigItem.pubDesc}}</div>
        </div>
      </div>
      <div class="arrow-g">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introBigItem: null
    };
  },
  created() {
    this.$ajax({
      method: "get",
      url: "/my/detailmovie?movieId=" + this.$route.params.id
    })
      .then(res => {
        this.introBigItem = res.detailMovie;
      })
      .catch(err => {
        console.log(err);
      });
    // this.$ajax
    //   .get("/my/detailmovie?movieId=" + this.$route.params.id)
    //   .then(result => {
    //     if (result.status === 200) {
    //       console.log("获取数据成功...");
    //       this.introBigItem = result.data.detailMovie;
    //     } else {
    //       console.log("发生未知错误，获取数据失败...");
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  },
  computed: {
    poster() {
      return this.introBigItem.img.replace(/w.h/, "148.208");
    },
    detailbg() {
      return this.introBigItem.img.replace(/w.h/, "71.100");
    }
  }
};
</script>
<style lang="scss">
.app-intro-big-item {
  height: auto;

  .item {
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    height: 5.013333rem;

    .detail-bg {
      position: absolute;
      z-index: -1;
      overflow: hidden;
      // background-image: url(//p0.meituan.net/71.100/movie/3e7696319c840d4890e947b926259d532809641.jpg);
      height: 5.013333rem;
      filter: blur(0.5rem);
      background-size: cover;
      background-repeat: no-repeat;
    }

    .detail-filter {
      position: absolute;
      z-index: -1;
      background-color: #333;
      opacity: 0.45;
    }

    .detail-box {
      padding: 0.506667rem 0.8rem 0.506667rem 0.4rem;
      display: flex;

      .poster {
        width: 3.933333rem;
      }

      .content {
        padding-left: 0.4rem;
        overflow-x: hidden;
        color: #fff;

        .title {
          font-size: 0.5rem;
          margin-top: 0.026667rem;
          font-weight: 700;
          overflow: hidden;
          height: auto;
        }

        .title-en-name {
          margin-top: 0.133333rem;
          font-size: 0.32rem;
          opacity: 0.8;
          height: auto;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .score {
          font-size: 0.48rem;
          font-weight: 700;
          color: #fc0;
          margin-top: 0.25rem;
          height: auto;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          .sum {
            margin-top: 0.266667rem;
            font-size: 0.32rem;
            color: #fff;
            opacity: 0.8;
          }
        }

        .type,
        .scr,
        .pubDesc {
          margin-top: 0.2rem;
          font-size: 0.32rem;
          opacity: 0.8;
          height: auto;
        }
      }
    }

    .arrow-g {
      width: auto;

      i {
        position: absolute;
        width: 0.266667rem;
        right: 0.4rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
